<template>
  <div>
    <van-nav-bar title="视频" left-text="返回" left-arrow @click-left="$router.back()" />
    <video width="100%" height="540" controls>
      <source src="../../assets/shopimg/git.mp4" type="video/mp4" />
      <source src="" type="video/mp4" />
    </video>
    <main>
      <div>
        <van-tabs v-model:active="active" style="">
          <van-tab title="直播介绍">
            <div class="zb">
              <div class="zb-js">老年骨质疏松性雄体压缩骨折的防治与思考</div>
              <div class="Year">
                2022.04.07 18:00<van-icon name="eye-o" style="margin-left: 65%" />6692
              </div>
              <div class="image">
                <img
                  src="https://tse2-mm.cn.bing.net/th/id/OIP-C.R2EmJHkclzzcsWRLXgph8wHauT?w=59&h=375&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                  alt=""
                />
              </div>
            </div>
          </van-tab>
          <van-tab title="互动评论">
            <input type="text" placeholder="说点什么~" />
          </van-tab>
        </van-tabs>
      </div>
    </main>
  </div>
</template>
<script lang="ts" setup>
// import route from '@/router';
import { ref } from 'vue'
import axios from 'axios'
import { useRoute } from 'vue-router'

const active = ref(0)
const route = useRoute()
const getbroadcast = ref([])
console.log(route.query.id)

const getLive = async (id: any) => {
  await axios.get(`/api/live?id=${id}`).then((res) => {
    console.log(res.data)
    getbroadcast.value = res.data.video
  })
}
getLive(route.query.id)
</script>
<style lang="scss" scoped>
.zb {
  width: 100%;
  height: 100%;

  .zb-js {
    width: 100%;
    height: 100px;

    font-size: 40px;
    font-weight: 500;
  }
  .Year {
    width: 100%;
    height: 50px;

    line-height: 50px;
  }
  .image {
    width: 100%;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>